<div class="container">
  <div class="row p-l-15 p-r-15 m-b-10 m-l-0 m-r-0 dashboard-header page-header--new">
    <div class="page-title col-xs-8 col-sm-7 col-lg-7 p-l-0">
      <favorites-control item="$ctrl.dashboard"></favorites-control>
      <h3>
        <edit-in-place class="edit-in-place" is-editable="$ctrl.layoutEditing" on-done="$ctrl.saveName" ignore-blanks="true" value="$ctrl.dashboard.name" editor="'input'"></edit-in-place>
      </h3>

      <img ng-src="{{$ctrl.dashboard.user.profile_image_url}}" class="profile__image_thumb--dashboard" alt="{{$ctrl.dashboard.user.name}}">

      <dashboard-tags-control class="hidden-xs"
        tags="$ctrl.dashboard.tags" is-draft="$ctrl.dashboard.is_draft" is-archived="$ctrl.dashboard.is_archived"
        can-edit="$ctrl.isDashboardOwner" get-available-tags="$ctrl.loadTags" on-edit="$ctrl.saveTags"></dashboard-tags-control>

    </div>
    <div class="col-xs-4 col-sm-5 col-lg-5 text-right dashboard__control p-r-0">
      <span ng-if="!$ctrl.dashboard.is_archived && !public" class="hidden-print">
          <div ng-if="$ctrl.layoutEditing" ng-switch="$ctrl.isLayoutDirty">
            <span ng-switch-when="true" ng-switch="$ctrl.saveInProgress || $ctrl.saveDelay">
                <span ng-switch-when="true">
                  <span class="save-status" data-saving>Saving</span>
                  <button class="btn btn-primary btn-sm" ng-disabled="$ctrl.editBtnClickedWhileSaving" ng-click="$ctrl.editBtnClickedWhileSaving = true">
                    <i class="fa fa-check" ng-class="{'fa-spinner fa-pulse': $ctrl.editBtnClickedWhileSaving}"></i> Done Editing
                  </button>
                </span>
                <span ng-switch-default>
                  <span class="save-status" data-error>Saving Failed</span>
                  <button class="btn btn-primary btn-sm" ng-click="$ctrl.retrySaveDashboardLayout()">
                    Retry
                  </button>
                </span>
            </span>
            <span ng-switch-default>
              <span class="save-status">Saved</span>
              <button class="btn btn-primary btn-sm"
                ng-disabled="$ctrl.isGridDisabled"
                ng-click="$ctrl.editLayout(false)">
                <i class="fa fa-check"></i> Done Editing
              </button>
            </span>
          </div>

          <button type="button" class="btn btn-default btn-sm" ng-click="$ctrl.togglePublished()" tooltip="Publish Dashboard" ng-if="$ctrl.dashboard.is_draft && !$ctrl.layoutEditing">
            <span class="fa fa-paper-plane"></span> Publish
          </button>

          <div class="btn-group" uib-dropdown ng-if="!$ctrl.layoutEditing">
            <button id="split-button" type="button"
                    ng-class="{'btn-default btn-sm': $ctrl.refreshRate === null,'btn-primary btn-sm':$ctrl.refreshRate !== null}"
                    class="btn btn-sm" ng-click="$ctrl.refreshDashboard()">
              <i class="zmdi zmdi-refresh" ng-class="{'zmdi-hc-spin': $ctrl.refreshInProgress}"></i> {{$ctrl.refreshRate === null ? 'Refresh' : $ctrl.refreshRate.name}}
            </button>
            <button type="button" class="btn hidden-xs" uib-dropdown-toggle
                    ng-class="{'btn-default btn-sm': $ctrl.refreshRate === null,'btn-primary btn-sm':$ctrl.refreshRate !== null}">
              <span class="caret"></span>
              <span class="sr-only">Split button!</span>
            </button>
            <ul class="dropdown-menu pull-right" ng-model="$ctrl.refreshRate" uib-dropdown-menu role="menu" aria-labelledby="split-button">
              <li role="menuitem" ng-repeat="refreshRate in $ctrl.refreshRates" ng-class="{disabled: !refreshRate.enabled}">
                <a ng-click="$ctrl.setRefreshRate(refreshRate)">{{refreshRate.name}}</a>
              </li>
              <li role="menuitem" ng-if="$ctrl.refreshRate !== null">
                <a href="#" ng-click="$ctrl.setRefreshRate(null)">Stop auto refresh</a>
              </li>
            </ul>
          </div>
          <button type="button" class="btn btn-sm hidden-xs" ng-class="{'btn-default': !$ctrl.isFullscreen, 'btn-primary': $ctrl.isFullscreen}" tooltip="Enable/Disable Fullscreen display" ng-click="$ctrl.toggleFullscreen()" ng-if="!$ctrl.dashboard.is_draft && !$ctrl.layoutEditing">
            <span class="zmdi zmdi-fullscreen"></span>
          </button>
          <button type="button" class="btn btn-sm hidden-xs" ng-class="{'btn-default': !$ctrl.dashboard.publicAccessEnabled, 'btn-primary': $ctrl.dashboard.publicAccessEnabled}" tooltip="Enable/Disable Share URL" ng-click="$ctrl.openShareForm()" ng-if="($ctrl.dashboard.canEdit() || $ctrl.dashboard.publicAccessEnabled) && !$ctrl.dashboard.is_draft && !$ctrl.layoutEditing" data-test="OpenShareForm">
            <span class="zmdi zmdi-share"></span>
          </button>
      </span>

      <div class="btn-group hidden-print hidden-xs" role="group" ng-show="$ctrl.dashboard.canEdit()" uib-dropdown ng-if="!$ctrl.dashboard.is_archived && !$ctrl.layoutEditing" data-test="DashboardMoreMenu">
        <button class="btn btn-default btn-sm dropdown-toggle" uib-dropdown-toggle>
          <span class="zmdi zmdi-more"></span>
        </button>
        <ul class="dropdown-menu pull-right" uib-dropdown-menu>
          <li ng-if="!$ctrl.dashboard.is_archived" ng-class="{hidden: $ctrl.isGridDisabled}"><a ng-click="$ctrl.editLayout(true)">Edit</a></li>
          <li ng-if="$ctrl.showPermissionsControl"><a ng-click="$ctrl.showManagePermissionsModal()">Manage Permissions</a></li>
          <li ng-if="!$ctrl.dashboard.is_draft"><a ng-click="$ctrl.togglePublished()">Unpublish</a></li>
          <li ng-if="!$ctrl.dashboard.is_archived"><a ng-click="$ctrl.archiveDashboard()">Archive</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="m-b-10 p-15 bg-white tiled" ng-if="$ctrl.layoutEditing">
    <label>
        <input name="input" type="checkbox" ng-model="$ctrl.dashboard.dashboard_filters_enabled" ng-change="$ctrl.updateDashboardFiltersState()">
        Use Dashboard Level Filters
    </label>
  </div>

  <div class="m-b-10 p-15 bg-white tiled" ng-if="$ctrl.globalParameters.length > 0" data-test="DashboardParameters">
    <parameters parameters="$ctrl.globalParameters" on-values-change="$ctrl.refreshDashboard"></parameters>
  </div>

  <div class="m-b-10 p-15 bg-white tiled" ng-if="$ctrl.filters | notEmpty">
    <filters filters="$ctrl.filters" on-change="$ctrl.filtersOnChange"></filters>
  </div>

  <div id="dashboard-container">
    <dashboard-grid
      ng-if="$ctrl.dashboard"
      dashboard="$ctrl.dashboard"
      widgets="$ctrl.dashboard.widgets"
      filters="$ctrl.filters"
      is-editing="$ctrl.layoutEditing && !$ctrl.isGridDisabled"
      on-layout-change="$ctrl.onLayoutChange"
      on-breakpoint-change="$ctrl.onBreakpointChanged"
      on-load-widget="$ctrl.loadWidget"
      on-refresh-widget="$ctrl.refreshWidget"
      on-remove-widget="$ctrl.removeWidget"
      on-parameter-mappings-change="$ctrl.extractGlobalParameters"
    />
  </div>

  <div class="add-widget-container" ng-if="$ctrl.layoutEditing">
    <h2>
      <i class="zmdi zmdi-widgets"></i>
      <span class="hidden-xs hidden-sm">Widgets are individual query visualizations or text boxes you can place on your dashboard in various arrangements.</span>
    </h2>
    <div>
      <a class="btn btn-default" ng-click="$ctrl.showAddTextboxDialog()">Add Textbox</a>
      <a class="btn btn-primary m-l-10" ng-click="$ctrl.showAddWidgetDialog()">Add Widget</a>
    </div>
  </div>
</div>
